使用JS的download库在浏览器直接下载文件 |
您所在的位置:网站首页 › vue downloadjs › 使用JS的download库在浏览器直接下载文件 |
使用JS的download库在浏览器直接下载文件
HTML5 a 标签可以使用 download 属性来设置资源的下载,但需要是同源,如果浏览器可以解析也会直接打开。 这时我们可以通过第三方库 download 来实现更完整的下载功能。 download.js 相关资源: Github 地址:https://github.com/rndme/download本站下载地址:https://static.runoob.com/download/download-master.zipCDN 库:https://cdn.staticfile.org/downloadjs/1.4.8/download.min.jsNPM 安装:npm install downloadjsdownload.js 库提供了 download() 函数用于下载文件。 下载内容可以是 URL、字符串、Blob 或类型化的数据数组,或者通过将文件数据表示为 base64 或 url 编码字符串的 dataURL。 无论输入格式如何,download() 都使用指定的文件名和 mime 信息以与使用 Content-Disposition HTTP 标头的服务器相同的方式保存文件。 download(data, strFileName, strMimeType); data - 下载的数据内容,可以是 Blob、File、String 或 dataURL。strFileName - 要创建的文件的名称。strMimeType - 要下载的文件的 MIME 内容类型。实例 文本 将字符串存储到 dlText.txt 文件中并下载: download("hello world", "dlText.txt", "text/plain");dataURL 文本实例: download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");blob 文本实例: download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");url 实例: download("/robots.txt");UInt8 文本数组实例: var str= "hello world",arr= new Uint8Array(str.length); str.split("").forEach(function(a,b){ arr[b]=a.charCodeAt(); }); download( arr, "textUInt8Array.txt", "text/plain" ); HTMLhtml 字符串实例: download(document.documentElement.outerHTML, "dlHTML.html", "text/html");html Blob 实例: download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");ajax 回调实例: $.ajax({ url: "/download.html", success: download.bind(true, "text/html", "dlAjaxCallback.html") }); 二进制文件图片 URL: download("/diff6.png");异步下载图片: var x=new XMLHttpRequest(); x.open( "GET", "/diff6.png" , true); x.responseType="blob"; x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");}; x.send(); 下一节:JavaScript策略模式利用对象键值的映射关系详解JS 编程技术引言策略模式指的是,定义一系列的算法,把它们一个个的封装起来,通过传递一些参数,使他们可以相互替换。举个周末从家去咖啡馆的例子:从家去咖啡馆,有跑步、骑行和漫步的方式。也就 ... |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |